<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>

    <script src="assets/js/vue.js"></script>
    <script src="assets/js/axios.js"></script>
    <!-- Required CSS files -->
    <link rel="stylesheet" href="assets/css/element.css">
    <!-- 引入组件库 -->
    <script src="assets/js/element.js"></script>
    <link href="assets/css/fonts.css" rel="stylesheet">


    <link rel="stylesheet" href="assets/css/owl.carousel.css">
    <link rel="stylesheet" href="assets/css/mycss.css">

    <link rel="stylesheet" href="assets/css/barfiller.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.css">
    <link rel="stylesheet" href="assets/css/main.css">
    <style type="text/css">
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 500px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>
</head>

<body>
    <header>
        <div class="container">
            <div class="row">
                <div class="col-6 col-sm-3 logo-column">
                    <a href="index.html" class="logo" style="color:#fff;font-size:22px">
                        <img src="assets/img/logo.png" alt="logo">&nbsp电脑DIY技术分享
                    </a>
                </div>
                <div class="col-6 col-sm-9 nav-column clearfix">
                    <div class="right-nav">
                        <a style="cursor:pointer;color:#acbbce" href="../computer_admin/login.html">管理端</a>
                        <span class="search-icon fa fa-search"></span>
                        <form action="" class="search-form" @submit.prevent="checkForm">
                            <input v-model="s" type="search" placeholder="请输入关键字">
                            <button type="submit"><i class="fa fa-search"></i></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div id="app" class="site">


        <el-carousel height="92vh" indicator-position="inside">
            <el-carousel-item v-for="item in imgs" style="height:92vh;width: 100%">
                <img :src="item" style="height:92vh;width:100%" alt="">
            </el-carousel-item>
        </el-carousel>
        <div class="contact-area sp" style="position: absolute;right:0px; top:120px; z-index: 100;height: 10px; ">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">

                        <el-tabs type="border-card"
                            style="background:rgba(0,0,0,0.5);border:0px dashed;border-radius:10px">
                            <el-tab-pane>
                                <span slot="label"><i class="el-icon-s-promotion"></i> 登录</span>
                                <form method="POST" @submit.prevent="login" class="contact-form">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <input type="text" name="username" v-model="form.username"
                                                placeholder="手机号">
                                        </div>
                                        <div class="col-lg-12">
                                            <input type="password" name="password" v-model="form.password"
                                                placeholder="密码">
                                        </div>
                                        <div class="col-lg-12">
                                            <button class="btn btn-info" type="button" @click="login">立即登录</button>

                                        </div>
                                    </div>
                                </form>

                            </el-tab-pane>
                            <el-tab-pane>
                                <span slot="label"><i class="el-icon-user"></i> 注册</span>
                                <form method="POST" @submit.prevent="register" class="contact-form">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <input type="text" name="username" v-model="regForm.username"
                                                placeholder="用户名">
                                        </div>
                                        <div class="col-lg-12">
                                            <input type="text" name="name" v-model="regForm.name" placeholder="昵称">
                                        </div>
                                        <div class="col-lg-12">
                                            <input type="password" name="password" v-model="regForm.password"
                                                placeholder="密码">
                                        </div>
                                        <div class="col-lg-12">
                                            <input type="password" name="rePassword" placeholder="再次输入密码">
                                        </div>
                                        <div class="col-lg-12">
                                            <input class="btn btn-info" type="submit" value="立即注册">
                                        </div>
                                    </div>
                                </form>

                            </el-tab-pane>
                        </el-tabs>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Required JS files-->
    <script src="assets/js/jquery-2.2.4.min.js"></script>
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>
    <script src="assets/js/vendor/owl.carousel.min.js"></script>
    <script src="assets/js/vendor/isotope.pkgd.min.js"></script>
    <script src="assets/js/vendor/jquery.barfiller.js"></script>
    <script src="assets/js/vendor/loopcounter.js"></script>
    <script src="assets/js/vendor/slicknav.min.js"></script>
    <script src="assets/js/active.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                s: '',
                toUrl: '',
                link: '<a href="#" rel="external nofollow" >这是一个连接</a>',
                seen: true,
                list: [],
                imgs: ['assets/img/login/1.jpg', 'assets/img/login/2.jpg', 'assets/img/login/3.jpg'],
                form: {
                    username: '',
                    password: ''
                },
                regForm: {
                    username: '',
                    name: '',
                    password: ''
                }
            },
            methods: {
                pub() {
                    let _this = this
                    console.log('ss')
                    location.href = ("../computer_admin/login.html")

                },
                checkForm(param) {
                    let _this = this
                    let searchUrl = encodeURI(`list.html?s=${_this.$data.s}`);   //使用encodeURI编码
                    let code = escape(_this.$data.s)
                    location.href = (`list.html?s=${code}&id=3`)
                },
                toDetail() {
                    location.href = ('detail.html')
                },
                login() {
                    let form = this.$data.form
                    axios({
                        method: 'POST',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                        },
                        url: 'http://127.0.0.1:888/member/login',
                        data: form
                    }).then((re) => {
                        if (re.data.code === 0) {
                            if (re.data.content.status == 1) {
                                this.$message.error("您的账号已被封停！")
                                return false
                            }
                            this.$message({
                                message: '登录成功',
                                type: 'success'
                            });
                            this.$data.userInfo = re.data.content.member
                            let userInfo = re.data.content.member
                            if (userInfo != null && userInfo.headImg == null) {
                                userInfo.headImg = `https://i7.3conline.com/images/upload/upc/face/29/47/75/76/29477576_70x70`
                            }
                            console.log('userinfo', userInfo)
                            sessionStorage.setItem('userInfo', JSON.stringify(userInfo)
                            )
                            sessionStorage.setItem('token', JSON.stringify(re.data.content.token))
                            setTimeout(`location.href = ("${this.$data.toUrl == '' ? 'index.html' : this.$data.toUrl}")`, 500)

                        } else {
                            this.$message.error(re.data.content);

                        }
                    })
                },
                GetRequest() {
                    var url = location.search; //获取url中"?"符后的字串  
                    var theRequest = new Object();
                    if (url.indexOf("?") != -1) {
                        var str = url.substr(1);
                        strs = str.split("&");
                        for (var i = 0; i < strs.length; i++) {
                            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                        }
                    }
                    return theRequest;
                },
                register() {
                    let refForm = this.$data.regForm
                    console.log(refForm)
                    axios({
                        method: 'POST',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                        },
                        url: 'http://127.0.0.1:888/member/join',
                        data: refForm
                    }).then((re) => {
                        console.log('r', re)
                        if (re.data.code === 0) {
                            this.$message({
                                message: '恭喜你，注册成功',
                                type: 'success'
                            });
                            setTimeout("location.href = ('login.html')", 2000)

                        } else {
                            this.$message.error('注册失败：' + re.data.content);

                        }
                    })
                }
            },
            created() {

                let _this = this
                let param = _this.GetRequest()
                if (param.backUrl != undefined) {
                    _this.$data.toUrl = unescape(param.backUrl)
                }
                axios({
                    method: 'get',
                    headers: {
                        'token': sessionStorage.getItem('token'),
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    url: 'http://127.0.0.1:888/module/list',
                }).then((re) => {
                    console.log(re)
                    if (re.data.code === 0) {
                        this.$data.list = re.data.content
                    }
                })
            }
        })


    </script>
</body>

</html>